<template>
    <div class="login">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>wuhu</span>
            </div>
                <el-form ref="form" :modal="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username" placeholder="placeholder"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="form.password" placeholder="placeholder"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loginHandle">Login</el-button>
                        <el-button type="primary" @click="regHandle">Reg</el-button>
                    </el-form-item>

                </el-form>
        </el-card>
    </div>
</template>

<script>
    import { mapMutations } from "vuex"
    import axios from 'axios'
    import qs from 'qs'


    export default {
        name: "login-in",
        data() {
            return {
                form: {}
            }
        },
        mounted() {
            this.changeIndex('登录')
        },

        methods:{
            ...mapMutations("user",["setUsername","setScore","setUserId"]),
            loginHandle(){


                if (this.form.username && this.form.password){
                    alert(this.form.username+"-"+this.form.password)
                    let user={
                        username:this.form.username,
                        password:this.form.password,
                    }

                    axios.post("http://39.103.156.157:8089/user/login",qs.stringify(user))
                        .then((response) =>{
                            // console.log(qs.stringify(user));
                            // console.log(axios.data)
                           //console.log(response.data.data.loginUser);
                            this.$store.commit('setLoginIn',true);
                            this.setUsername(response.data.data.loginUser.username);
                            this.setScore(response.data.data.loginUser.score);
                            this.setUserId(response.data.data.loginUser.userid);


                            localStorage.setItem("username",response.data.data.loginUser.username);
                            localStorage.setItem("score",response.data.data.loginUser.score)
                            localStorage.setItem("userId",response.data.data.loginUser.userid)


                            //this.$router.replace("/")
                            this.changeIndex('首页')
                            this.$router.push({path:'/'});
                        }).catch((error)=> {

                        console.log(error);
                    })
                    // axios END
                } else {
                    console.log('信息不完整!');
                    return false;

                }
            },
            regHandle(){
                this.$router.push({path:'/sign-up'});
            },
            changeIndex(value){
                this.$store.commit('setActiveName',value)
            }
        }
    }
</script>

<style scoped>
    .login  {
        width: 100%;
    }
    .box-card{
        width: 600px;
        margin: 0 auto;
        margin-top: 100px;

    }

    .clearfix:before,
    .clearfix:after{
        display: table;
        content: "";
    }

    .clearfix:after{
        clear: both;
    }
</style>
